<template>
  <div class="baskeball">
    <!-- 头部 -->
    <van-nav-bar
      left-arrow="true"
      fixed="true"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <span slot="title" @click="clickTitle">
        <span v-text="titleName"></span>
        <span class="iconfont icon-fanhuidingbu"></span>
      </span>
      <span slot="right">
        <span class="iconfont icon-funnel"></span>
        <i class="iconfont icon-more"></i>
      </span>
    </van-nav-bar>
    <!-- 手风琴 -->
    <van-collapse v-model="activeName">
      <van-collapse-item
        :name="index"
        v-for="(item ,index) in listData"
        :key="index"
        v-show="(index+'').substring(12,11) == 1"
      > 

       
        
         
         
        <!-- 手风琴标题 -->
        
        <div slot="title" class="collapseTitle">
          <span>{{index==='is_hot'?'热门':(item[0].changciWeek+' '+(index+'').substring(0,10))}}</span>
          <span>{{item.length+'场比赛可投注'}}</span>
        </div>
        <!-- 列表 -->
        <comList
          :is_type="typeVal"
          :listItem="item"
          v-on:getChooseItem="showChooseItemData"
          v-on:queryMoreDate="showMoreData"
        ></comList>
      </van-collapse-item>
    </van-collapse>
    <!-- 底部提示 -->
    <div v-if="itemLength.length" class="footBall_buttom_tips">页面赔率仅供参考，请以出票为准</div>
    <!-- 选择玩法类型 -->
    <van-popup v-model="typeModel" position="top" class="compeModel">
      <ul class="btn_ul">
        <li
          v-for="tval in conpeType"
          :key="tval"
          v-text="tval.text"
          :class="tval.type==typeVal?'btn_ul_li_choosed':''"
          @click="chooseType(tval)"
        ></li>
      </ul>
    </van-popup>

    <!-- 更多选项 -->
    <van-popup v-model="moreControl" class="moreControl">
      <headerMore></headerMore>
    </van-popup>
    <!-- 赛事类型筛选 -->
    <van-popup v-model="eventTypeSelect" class="event_type_select">
      <div class="top_icon">
        <i class="iconfont icon-808"></i>
      </div>
      <h3>赛事筛选</h3>
      <van-row class="event_type_select_control">
        <van-col span="8">
          <div @click="chooseTypeClass('all')">全选</div>
        </van-col>
      </van-row>
      <ul class="btn_ul">
        <li
          v-for="(tval,tkey) in matchName"
          @click="chooseMatchNameIetem(tval)"
          :key="tkey"
          v-text="tval.val"
          :class="tval.choosed== 0?'':'is_choosed'"
        ></li>
      </ul>
      <div class="botton_btn">
        <van-button type="default" class="button_esc" @click="ChooseMatchType('cancel')">取消</van-button>
        <van-button type="primary" class="button_isok" @click="ChooseMatchType('sure')">确认</van-button>
      </div>
    </van-popup>
    <!-- loading  -->
    <div v-if="isLoading" class="XC_loading">
      <van-loading color="#333"/>
    </div>
    <!-- footer 按钮信息 -->
    <van-submit-bar button-text="确认" @submit="onSubmit" class="footer_mark">
      <div class="clearData" @click="clearAllData">
        <i class="iconfont icon-qingli"></i>
        <div>清空</div>
      </div>

      <div class="selecteResult">
        <span>已选择{{itemLength}}场</span>
        <div>开奖结果包含加时赛</div>
      </div>
    </van-submit-bar>
    <!-- 查看更多数据 -->
    <van-popup v-model="moreInfoModel" class="moreInfo">
      <moreDataMode :moreItem="moreItem" v-on:closeMoreDatemodel="moreDateHeaderClickLeft"></moreDataMode>
    </van-popup>
    <!-- 没有查询到数据 -->
    <template v-if="notDataStatice === 0">
      <XCNodata :title="'没有赛事'"></XCNodata>
    </template>
  </div>
</template>
<script>
import comList from "./components/basketball_com_list.vue";
import moreDataMode from "./components/basketball_more.vue";
import headerMore from "./components/header_more.vue";
import XCNodata from "@comp/common/XC-noData.vue";

import { conpetitionType } from "./competitionConfig.js";

import {
  Button,
  Row,
  Col,
  Collapse,
  CollapseItem,
  Loading,
  NavBar,
  Popup,
  SubmitBar,
  Toast 
} from "vant";
import { type } from "os";

export default {
  name: "xc-header",
  components: {
    NavBar,
    comList,
    Collapse,
    CollapseItem,
    headerMore,
    Loading,
    Popup,
    Row,
    Col,
    XCNodata,
    moreDataMode,
    Toast 
  },
  data() {
    return {
      moreInfoModel: false, // 展开更多
      listData: [],
      showTips: true,
      activeName: [],
      isLoading: false,
      titleName: "竞彩篮球-混合过关",
      moreControl: false,
      matchName: [], // 赛事列表
      typeModel: false, // 玩法类型弹窗
      eventTypeSelect: false,
      conpeType: null,
      typeVal: 7, // 玩法类型
      chooseItem: {}, // 被选择的Item
      itemLength: 0,
      notDataStatice: -1,
      //  更多数据的变量
      MDTitle: "",
      moreItem: null
    };
  },
  props: {},
  watch: {},
  methods: {
    // 选择赛事类型，结果操作按钮
    ChooseMatchType(type) {
      if (type === "cancel") {
      } else if (type === "sure") {
        console.log(this.listData);
        // 获取筛选结果选项
        let matchArray = [];
        let choosedMatchName = [];
        for (let match in this.matchName) {
          if (this.matchName[match].choosed == 1) {
            choosedMatchName.push(this.matchName[match].val);
          }
        }
        if (choosedMatchName.length <= 0) {
          // 给提示
          Toast('请选择赛事');
          return false;
        }
      } 
        // 筛选数据
      //   this.InItData = JSON.parse(JSON.stringify(this.listData));

      //   let tempListData = this.listData;
      //   let itemArray = null;
      //   let markNum = 0;
      //   for (let item in tempListData) {
      //     itemArray = tempListData[item];

      //     for (let index in itemArray) {
      //       console.log(choosedMatchName.indexOf(itemArray[index].match_name));
      //       // debugger;
      //       if (choosedMatchName.indexOf(itemArray[index].match_name) === -1) {
            
      //         itemArray[index].isShow = 0;
      //       } else {
      //         markNum++;
      //       }
      //     }
      //     if (markNum === 0) {
      //       item = (item + "").substring(0, 10) + "-0";
      //     } else {
      //       item = (item + "").substring(0, 10) + "-1";
      //     }
      //   }
      //   this.listData = tempListData;
      // }
      // console.log(this.listData);

      this.eventTypeSelect = false;
    },
    //
    chooseTypeClass(type) {
      // debugger;
      if (type === "all") {
        for (let tempItem in this.matchName) {
          this.matchName[tempItem].choosed = 1;
        }
      }
    },
    chooseMatchNameIetem(item) {
      item.choosed = !item.choosed;
    },
    // 展开事件
    showMoreData(item) {
      // 头部数据
      // this.moreItem = JSON.parse(JSON.stringify(item));
      this.moreItem = item;
      this.moreInfoModel = true;
    },

    // 子组件选择的数据，在父组件里面显示选择选择总条数
    showChooseItemData(data) {
      // Object.getOwnPropertyNames(testObj).length

      // 首先判断数Item 对象是否存在，
      // 如果没有就直接push,如果存在就删除，并把Item 添加到数组的最后面

      let isHas = false;
      let tempItem = this.chooseItem;
      let tempData = data[0];
      // debugger;
      if (data[1]) {
        this.chooseItem[data[0].id] = { ...data[0] };
      } else {
        // 遍历传递进来的对象中是否有 其他选项为true、
        console.log(data[0]);
        // debugger;
        let tempArray = [
          ...tempData["odds_1"],
          ...tempData["odds_2"],
          ...tempData["odds_3"],
          ...tempData["odds_4"]
        ];
        for (let i = 0, j = tempArray.length; i < j; i++) {
          if (tempArray[i].is_choice) {
            this.chooseItem[data[0].id] = { ...data[0] };
            isHas = true;
            break;
          }
        }
        if (isHas === false) {
          delete this.chooseItem[data[0].id];
        }
      }

      console.log(this.chooseItem);
      this.itemLength = Object.keys(this.chooseItem).length;
    },
    // 清理所有数据
    clearAllData() {
      this.itemLength = 0;

      // 筛选数据
      for (let item in this.listData) {
        let itemArray = this.listData[item];
        for (let index in itemArray) {
          itemArray[index].odds_1 = this.playDataTrans(
            itemArray[index],
            "odds_1_all"
          );
          itemArray[index].odds_2 = this.playDataTrans(
            itemArray[index],
            "odds_2_all"
          );
          itemArray[index].odds_3 = this.playDataTrans(
            itemArray[index],
            "odds_3_all"
          );
          itemArray[index].odds_4 = this.playDataTrans(
            itemArray[index],
            "odds_4_all"
          );
        }
      }

      console.log("清理数据");
    },
    // 选择玩法类型
    chooseType(item) {
      const typeName = "竞彩篮球-";
      this.typeModel = false;
      this.typeVal = item.type - 0; // 字符串转换为数字
      this.titleName = typeName + item.text;
      //  debugger;
    },
    // 点击标题
    clickTitle() {
      this.typeModel = !this.typeModel;
      // console.log("title");
    },
    // 关闭弹窗点击事件
    moreDateHeaderClickLeft(item) {
      // debugger;
      if (item) {
        // console.log(this.listData);
        const tempId = item.id;
        // 重新构建数据
        let tempData = JSON.parse(JSON.stringify(this.listData));
        for (let objItem in tempData) {
          for (let temp in tempData[objItem]) {
            if (tempData[objItem][temp].id == tempId) {
              tempData[objItem][temp] = { ...item };
              // this.$forceUpdata();
              break;
            }
          }
        }
        this.listData = tempData;
      }

      this.moreInfoModel = false;
      console.log(this.listData);
      // this.moreItem = {};
    },
    // 点击右边的事件
    onClickRight(obj) {
      if (obj.target.nodeName === "SPAN") {
        // console.log("过滤");
        this.eventTypeSelect = true;
      } else if (obj.target.nodeName === "I") {
        // console.log("更多");
        this.moreControl = true;
      }
    },
    // 头部跳转
    onClickLeft() {
      this.$router.push({
        path: "/index"
      });
    },
    //
    transformData(obj) {
      if (obj) {
        let tempDateTime = null;
      } else {
        return {};
      }
    },
    // 赛事玩法数据结构封装
    playDataTrans(obj, key) {
      let tempArray = [];
      for (const v in obj[key]) {
        tempArray.push({
          is_choice: false,
          odds: obj[key][v],
          value: v
        });
      }
      return tempArray;
    },
    // 数据初始化
    initData() {
      this.isLoading = true;
      this.$api.getJclqMatch({}).then(
        res => {
          if (res.http_code === 200) {
            let DataArray = {};
            let tempDateTime = null;

            this.showTips = res.data.length;
            if (res.data.length === 0) {
              this.isLoading = false;
              return false;
            }
            this.notDataStatice = res.data.length;
            let tempMatchName = {};

            for (let item of res.data) {
              // 时间处理(投注时间为结束时间前五分钟)
              tempDateTime = new Date((item.match_time_int - 300) * 1000);
              item.overDateTime =
                tempDateTime.getHours() + ":" + tempDateTime.getMinutes();
              // 赛事文件名称
              tempMatchName[item.match_name] = 1;

              // 处理标题
              item.changciWeek = item.changci.substring(0, 2);
              item.Num = item.match_id.substring(8);
              if (DataArray[item.number_date+'-1'] == undefined) {
                DataArray[item.number_date+'-1'] = [item];
              } else {
                DataArray[item.number_date+'-1'].push(item);
              }
              // DataArray[item.number_date+'-1'].isShow = 1;
              //控制是否显示
              item.isShow = 1;
              // 赛事玩法数据结构封装
              item.odds_1 = this.playDataTrans(item, "odds_1_all");
              item.odds_2 = this.playDataTrans(item, "odds_2_all");
              item.odds_3 = this.playDataTrans(item, "odds_3_all");
              item.odds_4 = this.playDataTrans(item, "odds_4_all");
            }
            // console.log(this.matchName);
            // 赛事名称
            // console.log(tempMatchName);
            for (let matchItem in tempMatchName) {
              this.matchName.push({ choosed: 0, val: matchItem });
            }
            console.log(this.matchName);
            this.$nextTick(function() {
              // console.log(DataArray);
              // 首先渲染第一个手风琴，将数据呈现出来，然后在渲染后续的数据
              if (DataArray["is_hot"] === undefined) {
                this.listData = [DataArray[res.data[0].number_date+'-1']];
                this.activeName = [res.data[0].number_date+'-1'];
              } else {
                this.listData = [DataArray["is_hot"]];
                this.activeName = ["is_hot"];
              }
              // this.listData = DataArray;
              this.InItData = JSON.parse(JSON.stringify(DataArray));
              let _this = this;
              setTimeout(function() {
                _this.listData = DataArray;
              }, 1);
              console.log(DataArray);
            });
          }
          this.isLoading = false;
        },
        error => {
          this.showTips = false;
          this.isLoading = false;
        }
      );
    }
  },
  activated() {
    this.conpeType = conpetitionType;
    this.initData();
  },
  created() {}
};
</script>
<style lang="less" >
.van-collapse-item {
  .van-cell:not(:last-child)::after {
    left: 0;
  }
}

.baskeball {
  .icon-funnel {
    position: relative;
    left: -15px;
  }

  .van-collapse-item__content {
    padding: 0;
  }
  .van-collapse-item__wrapper,
  .van-collapse-item__content {
    color: @primary-color;
    background-color: @default-background-color;
  }
  .footBall_buttom_tips {
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
    color: @theme-color;
  }
  .moreControl {
    top: 14%;
    left: none;
    right: -160px;
    background-color: transparent;

    ul {
      width: 6rem;
      background-color: #fff;
      float: right;
      margin-top: 50px;

      li {
        height: 45px;
        line-height: 45px;
        border-bottom: 1px solid #eee;
        text-align: center;
        font-size: 16px;

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
  .van-collapse {
    margin-top: 45px;
  }
  // 更多信息窗口
  .moreInfo {
    width: 100%;
    height: 100%;
  }
  .footer_mark {
    .van-button {
      width: 100px;
    }
  }
  // 手风琴头部
  .collapseTitle {
    display: flex;
    span {
      flex: 1;
      &:last-child {
        text-align: right;
      }
    }
  }
  .clearData {
    display: flex;
    width: 82px;
    color: #808080;
    .icon-qingli {
      padding-left: 10px;
      align-items: center;
      font-size: 15px;
      transform: rotate(30deg);
    }
    div {
      padding-left: 4px;
      align-items: center;
      font-size: 16px;
    }
    &:after {
      content: " ";
      width: 0.05rem;
      height: 16px;
      position: relative;
      top: 3px;
      left: 4px;
      background-color: #eee;
    }
  }
  .selecteResult {
    margin-left: 12%;
    text-align: center;
    div {
      color: #999;
      font-size: 12px;
    }
  }
  .compeModel {
    width: 100%;
    top: 44px;
    .btn_ul {
      min-height: 184px;
      max-height: 184px;
      padding: 15px;
      font-size: 0;
      max-height: 185px;
      overflow: auto;
      .btn_ul_li_choosed {
        border-color: #ff473a;
        color: #ff473a;
      }
      li {
        display: inline-block;
        margin-bottom: 15px;
        margin-left: 15px;
        width: 47%;
        border: 1px solid hsla(0, 0%, 91%, 0.8);
        height: 40px;
        line-height: 40px;
        color: #333;
        font-size: 13px;
        text-align: center;
        border-radius: 5px;
        overflow: hidden;
        &:nth-child(2n + 1) {
          margin-left: 0;
        }
      }
    }
  }
  // 赛事选择
  .event_type_select {
    width: 90%;
    height: 370px;
    border-radius: 4px;
    overflow: initial;
    .top_icon {
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #fff;
      .icon-808 {
        position: relative;
        top: 0.2rem;
        left: 2px;
        font-size: 24px;
        color: @theme-color;
      }
    }
    h3 {
      position: relative;
      margin-top: 20px;
      font-size: 16px;
      font-weight: 400;
      text-align: center;
      ::before {
        position: absolute;
        top: 50%;
        width: 1.4rem;
        height: 1px;
        background-color: hsla(0, 0%, 91%, 0.8);
        content: "";
      }
      ::after {
        position: absolute;
        top: 50%;
        width: 1.4rem;
        height: 1px;
        background-color: hsla(0, 0%, 91%, 0.8);
        content: "";
      }
    }
    icon-fanhuidingbu {
      position: relative;
      // left: -84%;
      top: 2px;
    }
    .event_type_select_control {
      margin: 10px 15px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      font-size: 15px;
      // border: 1px solid #e8e8e8cc;
      .van-col {
        &:nth-child(2) {
          border-left: 1px solid #e8e8e8cc;
          border-right: 1px solid #e8e8e8cc;
        }
      }
    }
    .botton_btn {
      padding: 10px 15px;
      .van-button {
        width: 150px;
        font-size: 15px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        border-radius: 25px;
      }
      .button_esc {
        background-color: #fff;
        border: 1px solid #ff473a;
        color: #ff473a;
      }
      .button_isok {
        border: 1px solid #ff473a;
        background-color: #ff473a;
        color: #fff;
      }
    }
  }
  .event_type_select {
    .btn_ul {
      min-height: 184px;
      max-height: 184px;
      padding: 15px;
      font-size: 0;
      max-height: 185px;
      overflow: auto;
      .is_choosed {
        border-color: #ff473a;
        color: #ff473a;
      }
      li {
        display: inline-block;
        font-size: 15px;
        margin-left: 15px;
        border: 1px solid hsla(0, 0%, 91%, 0.8);
        width: 90px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        margin-bottom: 10px;
        border-radius: 5px;
        overflow: hidden;
        &:nth-child(3n + 1) {
          margin-left: 0;
        }
      }
    }
  }
}

.XC_loading {
  position: fixed;
  top: 50%;
  left: 50%;
  display: inline-block;

  width: 30px;
  height: 30px;
  padding: 25px;
  border-radius: 4px;
  z-index: 9999;
  line-height: 0;
  vertical-align: middle;
  background-color: rgba(0, 0, 0, 0.5);

  overflow: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
</style>